<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no" />
		<link rel="stylesheet" href="/static/webAPP/css/reset.css" type="text/css"/>
		<link href="/static/webAPP/css/my-indent.css" rel="stylesheet" type="text/css">
		<title>支付界面</title>
		<style>
			.pay-top {
				position: fixed;
				width: 100%;
				height: 45px;
				line-height: 45px;
				z-index: 9999;
				top: 0;
				left: 0;
				color: #333333;
				background: #FFFFFF;
				text-align: center;
				border-bottom: 1px solid #F3F3F3;
			}
			.pay-t1 {
				width: 30%;
				height: 45px;
				line-height: 45px;
				font-size: 14px;
				background: url(./images/arrow-left.png) no-repeat 10px center;
				background-size: 20%;
				float: left;
			}
			.pay-t2 {
				width: 40%;
				height: 45px;
				line-height: 45px;
				font-size: 16px;
				float: left;
			}
			.pay-mid{
				width: 100%;
				margin-top: 50px;
				position: relative;
				top: 0;
				background: #F8F3F7;
				float: left;
			}
			.pay-mid-box1{
				float: left;
				width: 94%;
				font-size: 14px;
				line-height: 50px;
				border-bottom: 1px solid #D4D4D4;
				margin-left: 3%;
			}
			.pay-mid-box1-a{
				float: left;
			}
			.pay-mid-box1-b{
				float: right;
				color: #787878;
			}
			.pay-method{
				width: 94%;
				height:60px;
				line-height:40px;
				float: left;
				padding: 0px 3%;
				background: url(./images/arrow-right.png) no-repeat 97% center #fff;
				background-size: 6%;
				margin-bottom: 5px;
				font-size: 14px;
			}
			.pay-method a{
				width: 100%;
				height: 100%;
				float: left;
			}
			.zhifubao_btn img{
				height: 43px;
				float: left;
				margin-top: 8px;
			}
			.weichat_btn img{
				height: 50px;
				float: left;
				margin-top: 5px;
			}
			.cash_btn img{
				height: 43px;
				float: left;
				margin-top: 8px;
			}
			.pay-supplement{
				width: 100%;
				height: 30px;
				background-color: bisque;
				float: left;
				font-size: 12px;
				line-height: 30px;
				text-align: center;
				color: maroon;
			}
		</style>
	</head>
	<body>
		<div class="pay">
			
			<div class="pay-top">
				<a href="javascript:history.go(-1);" class="pay-t1"></a>
				<span class="pay-t2">支付结算</span>
			</div>	
			<div class="pay-mid">
				<div class="pay-mid-box1">
					<span class="pay-mid-box1-a">订单号</span>
					<span class="pay-mid-box1-b pay-info1"></span>
				</div>
				<div class="pay-mid-box1">
					<span class="pay-mid-box1-a">结算金额</span>
					<span class="pay-mid-box1-b pay-info2"></span>
				</div>
				<div class="pay-mid-box1">
					<span class="pay-mid-box1-a">取货地址</span>
					<span class="pay-mid-box1-b pay-info3"></span>
				</div>
				<span class="pay-info4"></span>
			</div>
			<div class="pay-supplement">次日 9:00 配货完成,取货时间 9:00-21:00 </div>
			<div class="pay-method pay-method1"></div>
			<div class="pay-method pay-method2"><a href="javascript:void(0);" class="cash_btn"><img src="./images/cash.png"></a></div>
			<!-- <div class="pay-method zhifubao_btn"><img src="/static/webAPP/images/zhifubaologo.png"><i class="zhifubao-info"></i></div> -->
			<!-- <div class="pay-method weichat_btn"><img src="/static/webAPP/images/wxpaylogo_xxxhdpi.png"><i class="weixin-info"></i></div> -->
		</div>


		<script src="/static/webAPP/js/jquery-1.8.3.min.js"></script>
		<script src="/static/webAPP/lib/mobile/layer.js"></script>
		<script>
			var appId = null;
			var timeStamp = null;
			var nonceStr = null;
			var prepayId = null;
			var signType = null;
			var paySign = null;

			$(function(){
				var userAgent = navigator.userAgent.toLowerCase();

				if(userAgent.match(/Alipay/i) == "alipay") {
					$(".pay-method1").html('<a href="javascript:void(0);" class="zhifubao_btn"><img src="./images/zhifubaologo.png"></a>')
				} else if(userAgent.match(/MicroMessenger/i) == "micromessenger") {
					$(".pay-method1").html('<a href="javascript:void(0);" class="weichat_btn"><img src="./images/wxpaylogo_xxxhdpi.png"></a>')
				}else{
					$(".pay-method1").html('<a href="javascript:void(0);" class="zhifubao_btn"><img src="./images/zhifubaologo.png"></a>')
				}
				
				var oid = getUrlParam('id')
				var amount = getUrlParam('amount')
				var place = getUrlParam('place')

				$(".pay-info1").html(oid)
				$(".pay-info2").html(amount +"元")
				$(".pay-info3").html(decodeURI(place))
				if (decodeURI(place) == '送货上门') {
					$(".pay-info4").html('<div class="pay-mid-box1"><span class="pay-mid-box1-a">详细地址</span><span class="pay-mid-box1-b">'+ sessionStorage.getItem("sessionAddress") +'</span></div>')
				}

      			var user_id = sessionStorage.getItem("sessionUserid")
				

				$(document).on("click",".cash_btn",function(){
					layer.open({
						content: '正在支付',
						skin: 'msg',
						time: 2 //2秒后自动关闭
					});
					$.ajax({
						type: "post",
							//TODO:
						url: "/memberPay/BuyInMemberPay",
						data: {out_trade_no: oid,user_id:user_id},
						dataType: "json",
						success: function(res){
							if (res.success == true) {
								layer.open({
									content: '支付成功！',
									skin: 'msg',
									time: 2 //2秒后自动关闭
								});
								setTimeout(function(){
									window.location.href="/static/webAPP/my-indent-dfh.html"
								}, 2000);
							}else{
								layer.open({
									content: res.message,
									skin: 'msg',
									time: 2 //2秒后自动关闭
								});
							}
							
						}
					})
				})

				$(document).on("click",".zhifubao_btn",function(){
					layer.open({
						content: '正在支付',
						skin: 'msg',
						time: 2 //2秒后自动关闭
					});
					$.ajax({
						type: "get",
							//TODO:
						url: "/Api/Web/AliPay/" + oid,
						data: '',
						dataType: "json",
						success: function(res){
							// window.location = mag.data
							const div = document.createElement('div');
							div.innerHTML = res.data; // html code
							document.body.appendChild(div);
							document.forms[0].submit();
						}
					})
				})

				$(document).on("click",".weichat_btn",function(){
					layer.open({
						content: '正在支付',
						skin: 'msg',
						time: 2 //2秒后自动关闭
					});
					$.ajax({
						type: "post",
							//TODO:
						url: "/Api/Web/WePay",
						data: {tradeNo: oid},
						dataType: "json",
						success: function(mag){
							var wePayRequestAttr = mag.data;
							appId = wePayRequestAttr.appid;
							timeStamp = wePayRequestAttr.timeStamp;
							nonceStr = wePayRequestAttr.nonceStr;
							prepayId =  wePayRequestAttr.prepayId;
							signType = wePayRequestAttr.signType;
							paySign = wePayRequestAttr.paySign;
							if (typeof WeixinJSBridge == "undefined"){
								if( document.addEventListener ){
									document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
								}else if (document.attachEvent){
									document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
									document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
								}
							}else{
								onBridgeReady();
							}
						},
						error: function(mag){
							layer.open({
								content: mag.message,
								skin: 'msg',
								time: 2 //2秒后自动关闭
							});
						}
					})
				})

				
			})

			function onBridgeReady(){
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId":"wx45db0b3d36e1f241",     //公众号名称，由商户传入
						"timeStamp":timeStamp,         //时间戳，自1970年以来的秒数
						"nonceStr":nonceStr, //随机串
						"package":prepayId,
						"signType":signType,         //微信签名方式：
						"paySign":paySign //微信签名
					},
					function(res){
						if(res.err_msg == "get_brand_wcpay_request:ok" ){
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							window.location.href="/static/webAPP/my-indent-dfh.html"
						}else{
							layer.open({
								content: '支付失败,请返回重新支付',
								skin: 'msg',
								time: 2 //2秒后自动关闭
							});
						}
					});
			}

			function getUrlParam(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
				var context = "";
				if (r != null){
					context = r[2];
					reg = null;
					r = null;
				}
				return context == null || context == "" || context == "undefined" ? "" : context;
			}
		</script>
	</body>
</html>
